import React from 'react'
import { connect } from 'dva'
import { Form, Button, Modal, Popconfirm, Table, Row, Col, Input, Select, message, Icon, Checkbox, Radio, Tooltip, Tabs, Cascader, DatePicker } from 'antd'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './gameStatusEditStyle.less'
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
import Uploader from 'widget/Upload'
import { isEmpty, isArray, cloneDeep, set, get, pick } from 'lodash'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';

// 引入列表页组件
// import Ueditor from '../../../../widget/Editor/Ueditor.js'
import Ueditor from '../../../../widget/Editor/Ueditor.js'
import ListPage from 'widget/PageTmpl/ListPage'

// import giftDetail_demo from '../../../../assets/img/gift/giftDetail_demo.png'
// import giftDetail_demo1 from '../../../../assets/img/gift/giftDetail_demo1.png'
import giftDetail_demo2 from '../../../../assets/img/gift/giftDetail_demo2.png'
// import giftDetail_demo3 from '../../../../assets/img/gift/giftDetail_demo3.png'


const FormItem = Form.Item
// const TabPane = Tabs.TabPane
// const confirm = Modal.confirm;
const InputGroup = Input.Group;
const { RangePicker } = DatePicker
const Option = Select.Option


const formItemLayout = {
	labelCol: { span: 4 },
	wrapperCol: { span: 19 },
};
const formItemLayoutTime = {
	labelCol: { span: 5 },
	wrapperCol: { span: 19 },
};
const formItemLayout2 = {
	labelCol: { span: 2 },
	wrapperCol: { span: 8 },
};
const formItemLayoutForTime = {
	labelCol: { span: 2 },
	wrapperCol: { span: 20 },
};
const formItemLayout3 = {
	labelCol: { span: 8 },
	wrapperCol: { span: 16 },
}
const formItemLayout4 = {
	labelCol: { span: 4 },
	wrapperCol: { span: 20 },
}
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const gameStatusEditView = function ({ dispatch, model, form }) {
	// 表单的子函数
	const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
	// 取出model对象，命名空间
	const { modelObj, namespace } = model
	let { btnLoading, detail, isSubmit, imgModal } = modelObj
	// console.log(detail)
	function inputChange(value, type, index) {
        detail[type] = value;
		changeState({ detail })

	}

    function removeImgUrl(type) {
		detail[type] = '';
		changeState({ detail })
	}

	function changeImgModal(visible = false, srcs = []) {
		// console.log(imgModal)
		imgModal.visible = visible
		imgModal.srcs = srcs || modelObj.srcs
		changeState({ imgModal })
	}

	//封面图改变时
	function updateImageModel(value, type) {
		detail[type] = value
		changeState({ detail })
	}
	
	//提交
	function submit() {
		validateFields((err, values) => {
			if (!err) {
				dispatch({
					type: `${namespace}/submit`,
					payload: {}
				})
			}
		});
	}

	//修改状态
	const changeState = (payload) => {
		// console.log(payload);
		dispatch({
			type: `${namespace}/updateStore`,
			payload: { ...payload }
		})
	};


	return (
		<div className={cx('pageLayout')}>
			<div className='public_listMain'>
				<div className={"functionButton"}>
					{/* {actionType == "add" || actionType == "edit" ?
						<Button type='primary' onClick={e => submit()} loading={btnLoading}>提交</Button> : null} */}
					<Button type='primary' onClick={e => submit()} loading={btnLoading} disabled={!isSubmit}>提交</Button>
				</div>
				<Form>
					<div className="boxShadow">
						<CollapsiblePanels title={'游戏类型'} hideUpDownBtn={true}>
                        <Row>
                            <Col span={12}>
									<FormItem
										{...formItemLayout}
										// extra="图片分辨率需为1372px*672px，且文件大小在200kb以下，支持jpg，png格式。"
										label="游戏图片"
									>
										<div className={cx('uploaderBox')}>
											<div className={cx('uploaderDiv')}>
												<Uploader 
													uploadedUrls={detail.gameImgUrl}
													removeFileCbf={() => { removeImgUrl('gameImgUrl') }}
													uploadSuccessCbf={(imgUrl) => {
														updateImageModel(imgUrl, 'gameImgUrl')
													}}
													showType='6'
													// minCropBoxWidth={1372}
													// minCropBoxHeight={672}
													// unsetWidth={true}
													fileType='image'
													// fileMaxSize='0.2'
													maxFiles='1'
												/>
											</div>
										</div>
									</FormItem>
								</Col>
                            </Row>
							<Row>
								<Col span={12}>
									<FormItem label='游戏名称'  {...formItemLayout}>
										{getFieldDecorator('gameName', {
											rules: [{
												required: true, whitespace: true, message: '请输入游戏名称'
											}],
											initialValue: detail.gameName ? detail.gameName + '' : ''
										})(
											<Input
												// disabled={actionType == 'detail'}
												placeholder='请输入游戏名称' onChange={(e) => { inputChange(e.target.value, 'gameName') }} />
										)}
									</FormItem>
								</Col>

                                <Col span={12}>
									<FormItem label='游戏描述'  {...formItemLayout}>
										{getFieldDecorator('description', {
											rules: [{
												required: true, whitespace: true, message: '请输入游戏描述'
											}],
											initialValue: detail.description ? detail.description + '' : ''
										})(
											<Input
												// disabled={actionType == 'detail'}
												placeholder='请输入游戏描述' onChange={(e) => { inputChange(e.target.value, 'description') }} />
										)}
									</FormItem>
								</Col>
							</Row>
						</CollapsiblePanels>
					</div>
				</Form>

 
			</div>
		</div>

	)
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(gameStatusEditView))
